import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

// 就相当于redux中的action
const actions = {
    // 加法
    // 这里的方法有两个参数， context和value
    // 这里的context是上下文，里面包含dispatch , commit等需要用到的store方法
    // value就是dispatch里面传过来的this.value值。
    /* 
    // 这俩不设计任何业务判断和操作，所以直接省略掉，
    // 并且，在组件内，不需要再dispatch这俩action，而是直接commit即可。
    inc(context, value) {
        // console.log(a, b);
        context.commit('inc', value);
    },
    dec(context, value) {
        context.commit('dec', value);
    }, */
    oddInc(context, value) {
        // console.log(context, value);
        if (context.state.num % 2) {
            context.commit('oddInc', value);
        }
    },
    asyncInc(context, value) {
        setTimeout(() => {
            context.commit('asyncInc', value);
        }, 1000)
    },
    reset(context, value) {
        context.commit('reset', value);
    }
};

// 操作获取到的数据，返回新的数据，相当于redux中的reducer
// 这里的方法也包含两个参数， state和value
// state是接收到的旧的状态，里面有旧的num值，为0
// value和上面那个value一样
const mutations = {
    inc(state, value) {
        // console.log(state, value);
        // 计算后，得到一个新的num值
        state.num += value;
    },
    dec(state, value) {
        state.num -= value;
    },
    oddInc(state, value) {
        state.num += value;
    },
    asyncInc(state, value) {
        state.num += value;
    },
    reset(state, value) {
        state.num = 0;
    }
};

// 储存初始数据
const state = {
    num: 0,
    name: '迪丽热巴',
    age: 18
};

// 收到更新后的state作为参数，然后对state里面的值进行加工
// 类似于计算属性方法computed
const getters = {
    sum(state) {
        return state.num * 10;
    }
}

export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})